<template>
	<div class="flex-sub margin-left">
		<pol-title title="炉次列表">
			<template #right>
				<div class="flex align-center cursor" @click="$routerGo('/produceTracking/heatSchedule')">
					<span class="text-lg">更多</span>
					<el-icon color="#35d9d9">
						<ArrowRight />
					</el-icon>
				</div>
			</template>
		</pol-title>

		<div class="padding border-solid bg-tm radius-sm" style="height: 260px;">
			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" height="250px">
				<template #meltId="{ row }">
					<div class="td-bg cursor" @click="planPopup(row)">
						<span class="tb-bg-span">{{row.meltId}}</span>
					</div>
				</template>
				<template #ladleId="{ row }">
					<div class="td-bg cursor" v-if="row.ladleId" @click="gangbPopup(row, 'gangb')">
						<span class="tb-bg-span">{{row.ladleId}}</span>
					</div>
				</template>
				<template #steelGrade="{ row }">
					<div class="td-bg cursor" v-if="row.steelGrade" @click="gangbPopup(row, 'gangz')">
						<span class="tb-bg-span">{{row.steelGrade}}</span>
					</div>
				</template>
				<template #submitConfirmed="{ row }">
					<div class="td-bg cursor">
						<span class="tb-bg-span text-green2">{{row.submitConfirmed}}</span>
					</div>
				</template>
			</pol-table>
		</div>

		<el-dialog v-model="dialogPlanPopup" title="炉次计划" width="1800" center align-center class="search-light">
			<pol-table ref="polTableRef" v-bind="tableOpt2" height="150px" cellClassName="cellClass"></pol-table>
			<!-- 炉次计划信息 -->
			<furnaceNumber ref="furnaceNumberRef" tableClass="cellClass" class="margin-top-lg" type="components"></furnaceNumber>
		</el-dialog>

		<el-dialog v-model="dialogBZPopup" :title="BZtype === 'gangb' ? '钢包罐信息' : '钢种信息'" width="800" center align-center class="search-light">
			<div class="padding">
				<div class="text-lg text-black padding-bottom">
					目标炉次
				</div>
				<div class="flex align-center margin-top">
					<div class="flex-sub">二级炉次</div>
					<div class="flex-sub">制作命令号</div>
					<div class="flex-sub">熔炼号</div>
				</div>
				<div class="flex align-center margin-top">
					<div class="flex-sub lc-input">2064846</div>
					<div class="flex-sub margin-lr lc-input">480992</div>
					<div class="flex-sub lc-input">2461166</div>
				</div>

				<div class="text-lg text-black padding-bottom margin-top-lg">
					{{BZtype === 'gangb' ? '钢包罐信息' : '炉次钢种'}}
				</div>

				<div class="margin-top flex align-center" v-if="BZtype === 'gangb'">
					<div class="flex-sub flex align-center">
						<span class="margin-right-sm">钢包罐ID</span>
						<el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>

					<div class="flex-sub flex align-center">
						<span class="margin-right-sm">钢包重量（t）</span>
						<el-input-number v-model="gbzl" controls-position="right" size="large"></el-input-number>
					</div>
				</div>

				<div class="margin-top tree-box" v-if="BZtype === 'gangz'">
					<el-tree style="max-width: 600px" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
				</div>

				<div class="flex justify-end padding-bottom padding-right margin-top">
					<el-button type="primary" class="btn-bg-blue padding-lr-xl margin-top-lg" size="large">保存</el-button>
				</div>
			</div>
		</el-dialog>

	</div>
</template>

<script setup>
	import furnaceNumber from '../../produceTracking/components/furnaceNumber.vue'

	import { ref, getCurrentInstance } from 'vue';

	const { proxy } = getCurrentInstance();
	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '二级炉次', key: 'heatid', align: 'center' },
		{ label: '制造命令号', key: 'planHeatid', align: 'center' },
		{ label: '熔炼号', key: 'meltId', align: 'center', width: '150px', slot: true },
		{ label: '状态', key: 'heatStatus', align: 'center' },
		{ label: '实际浇次号', key: 'castid', align: 'center' },
		{ label: '浇次内序号', key: 'heatNum', align: 'center', width: '120px' },
		{ label: '钢包', key: 'ladleId', align: 'center', slot: true, width: '100px' },
		{ label: '开始时刻', key: 'heatStarttime', align: 'center', width: '200px' },
		{ label: '浇铸重量', key: 'castWeight', align: 'center' },
		{ label: '钢种', key: 'steelGrade', align: 'center', width: '100px', slot: true },
		{ label: '待确认', key: 'submitConfirmed', align: 'center', width: '100px', slot: true },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		url: proxy.$http.casting.getCastviewHeatInfo,
	});

	//表格配置
	const columns2 = ref([
		{ label: '计划更新时刻', key: 'ItemCode', align: 'center', width: '170px' },
		{ label: '计划到台时刻', key: 'ItemName', align: 'center', width: '170px' },
		{ label: '计划上台时刻', key: 'ItemValue', align: 'center', width: '170px' },
		{ label: '计划离台时刻', key: 'IsDefault', align: 'center', width: '170px' },
		{ label: '计划到台重量', key: 'P_IsSys', align: 'center', width: '130px' },
		{ label: '计划离台重量', key: 'P_IsReadOnly', align: 'center', width: '130px' },
		{ label: '铸坯数量', key: 'gangbao', align: 'center' },
		{ label: '出坯重量', key: 'kaishi', align: 'center' },
		{ label: '罐ID号', key: 'chongzhi', align: 'center' },
		{ label: '罐重量', key: 'gangzhong', align: 'center' },
		{ label: '记录人', key: 'caozhuo', align: 'center' },
		{ label: '创建时刻', key: 'caozhuo2', align: 'center', width: '170px' },
		{ label: '更新时刻', key: 'caozhuo3', align: 'center', width: '170px' },
	]);

	//表格配置
	const tableOpt2 = ref({
		columns: columns2.value,
		localData: [{
			ItemCode: '2025-01-01 08:32:15',
			ItemName: '2025-01-01 08:32:15',
			ItemValue: '2025-01-01 08:32:15',
			IsDefault: '2025-01-01 08:32:15',
			P_IsSys: '120t',
			P_IsReadOnly: '120t',
			gangbao: '345',
			kaishi: '120t',
			chongzhi: '24813',
			gangzhong: '3t',
			caozhuo: '张三',
			caozhuo2: '2025-01-01 08:32:15',
			caozhuo3: '2025-01-01 08:32:15'
		}]
	});

	const dialogPlanPopup = ref(false) //新增编辑弹窗
	//炉次计划弹出
	const planPopup = () => {
		dialogPlanPopup.value = true
	}

	const dialogBZPopup = ref(false) //钢包、钢种弹窗
	const BZtype = ref('')
	//钢包弹窗
	const gangbPopup = (row, type) => {
		BZtype.value = type
		dialogBZPopup.value = true
	}

	const value = ref('32')

	const options = [{
		value: '32',
		label: '32',
	}, ]

	const gbzl = ref() //钢包重量


	const handleNodeClick = (data) => {
		console.log(data)
	}

	const data = [{
			label: '钢种1',
			children: [{
				label: '钢种1-1',
			}, ],
		},
		{
			label: '钢种2',
			children: [{
					label: '钢种2-1',

				},
				{
					label: '钢种2-2',
				},
			],
		},
		{
			label: '钢种3',
			children: [{
					label: '钢种3-1',
				},
				{
					label: '钢种3-2',
				},
			],
		},
	]

	const defaultProps = {
		children: 'children',
		label: 'label',
	}
</script>

<style lang="scss" scoped>
	.lc-input {
		padding: 16px;
		border: 1px solid #e1e1e1;
		border-radius: 4px;
		background-color: #f1f1f1;
	}

	.tree-box {
		max-height: 400px;
		overflow-y: auto;
	}
</style>